<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../util/jquery-3.4.0.js"></script>
    <script src="../util/bootstrap-3.3.7/dist/js/bootstrap.js"></script>
    <script src="../util/layui-v2.4.5/layui/layui.all.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts-en.common.js"></script>
    <link rel="stylesheet" href="../util/bootstrap-3.3.7/dist/css/bootstrap.css">
    <link rel="stylesheet" href="../css/zxp-EmAttendance.css">
    <link rel="stylesheet" href="../util/layui-v2.4.5/layui/css/layui.css">
</head>
<body>

<div id="box">
    <form action="">
    <p id="two">
        <strong>国信国际幼儿园考勤表</strong>
        <input type="text" class="form so" placeholder="请输入姓名搜索">
        <button class="btn btn-default btn-info" type="button"><span class="glyphicon glyphicon-search soso" aria-hidden="true"></span></button>
        <button class="btn btn-default btn-info two-1" type="button"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加成员</button>
    </p>
    <div id="three">
        <div class="layui-inline">
            <div class="three-1"><strong>选择查看日期：</strong></div>
            <input type="text" class="layui-input" id="test1" >
        </div>
        <button class="btn btn-warning abnormal" type="button">
            今日考勤异常 <span class="badge">2</span>
        </button>
        <div id="main">
        </div>
    </div>
    <table class="table table-striped table-hover tab">
        <tr >
            <th class="th-last"></th>
            <th>#</th>
            <th>工号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>岗位</th>
            <th>工作时间（天）</th>
            <th>迟到（次）</th>
            <th>请假（天）</th>
            <th>旷工（天）</th>
            <th>功能选项</th>
        </tr>
    </table>
    <nav aria-label="Page navigation" id="four">
        <ul class="pagination">
            <li><a href="JavaScript:void(0);">首页</a></li>
            <li>
                <a href="JavaScript:void(0);" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li><a href="JavaScript:void(0);">1</a></li>
            <li><a href="JavaScript:void(0);">2</a></li>
            <li><a href="JavaScript:void(0);">3</a></li>
            <li><a href="JavaScript:void(0);">4</a></li>
            <li><a href="JavaScript:void(0);">5</a></li>
            <li>
                <a href="JavaScript:void(0);" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            <li><a href="JavaScript:void(0);">尾页</a></li>
        </ul>
       <div class="four-1">
           <button class="btn btn-info layui-btn-xs Btn-All" type="button">全选</button>
           <button class="btn btn-info layui-btn-xs Btn-No" type="button">全不选</button>
           <button class="btn btn-info layui-btn-xs Btn-AllDel" type="button">删除</button>
       </div>
    </nav>
</form>
    <div id="Mask">
    </div>

    <!--考勤异常-->
    <div class="Ma-1" id="Mask1">
        <div class="Ma-2">
            <strong>考勤异常表</strong>
            <a href="javascript:void (0);" class="cancel "><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
        </div>
        <div class="conent">
            <table class="table table-striped table-hover">
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>部门</th>
                    <th>异常原因</th>
                    <th>时间</th>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>男</td>
                    <td>安保部</td>
                    <td>迟到</td>
                    <td>2019-5-13 9:10</td>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>男</td>
                    <td>安保部</td>
                    <td>迟到</td>
                    <td>2019-5-13 9:10</td>
                </tr>
            </table>
        </div>
    </div>

    <!--添加成员-->
    <div class="Ma-1" id="Mask2">
        <div class="Ma-2">
            <strong>添加成员</strong>
            <a href="javascript:void (0);" class="cancel "><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
        </div>
        <div class="conent">
            <form class=" form-horizontal">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-3 control-label">工号</label>
                    <div class="col-sm-9">
                        <input type="email" class="form-control input-sm b1" placeholder="请输入工号">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-3 control-label">姓名</label>
                    <div class="col-sm-9">
                        <input type="email" class="form-control input-sm b2" placeholder="请输入姓名">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-3 control-label">性别</label>
                    <div class="col-sm-9">
                        <select class="form-control input-sm b3">
                            <option>男</option>
                            <option>女</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-3 control-label">年龄</label>
                    <div class="col-sm-9">
                        <input type="email" class="form-control input-sm b4" placeholder="请输入年龄">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-3 control-label">联系电话</label>
                    <div class="col-sm-9">
                        <input type="email" class="form-control input-sm b5" placeholder="请输入电话">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-3 control-label">职位</label>
                    <div class="col-sm-9">
                        <select class="form-control input-sm b6">
                            <option>主任</option>
                            <option>老师</option>
                            <option>保洁员</option>
                            <option>安保</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-3 control-label">紧急联系人</label>
                    <div class="col-sm-9">
                        <input type="email" class="form-control input-sm b7" placeholder="请输入姓名">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-3 control-label">联系电话</label>
                    <div class="col-sm-9">
                        <input type="email" class="form-control input-sm b8" placeholder="请输入电话">
                    </div>
                </div>
            </form>
        </div>
        <div class="Ma-3">
            <button class="ok">确定</button>
            <button class="no">取消</button>
        </div>
    </div>

    <!--详情-->
    <div class="Ma-1" id="Mask3">
        <div class="Ma-2">
            <strong>详细信息</strong>
            <a href="javascript:void (0);" class="cancel "><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
        </div>
        <p>工号：12121</p>
        <p>姓名：XXX</p>
        <p>性别：男</p>
        <p>年龄：122</p>
        <p>职位：老大</p>
        <p>电话：11121231231</p>
        <p>入职时间：2018年03月23号</p>
        <p>家庭紧急联系人：XXX</p>
        <p>与紧急联系人关系：父母</p>
        <p>电话：1223232323444</p>
        <p>现居住住址：成都市天府新区xx街道xx号国信安</p>
        <p>户口所在地：成都市天府新区xx街道xx号</p>
        <p>身份证号：2321214342345342414131231</p>
    </div>

    <!--编辑-->
    <div class="Ma-1" id="Mask4">
        <div class="Ma-2">
            <strong>修改信息</strong>
            <a href="javascript:void (0);" class="cancel "><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
        </div>
        <div class="conent">
            <form class=" form-horizontal">
                <div class="form-group">
                    <label class="col-sm-3 control-label">工号</label>
                    <div class="col-sm-9">
                        <input type="number" class="form-control input-sm" id="x1" placeholder="请输入工号">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-3 control-label">姓名</label>
                    <div class="col-sm-9">
                        <input type="email" class="form-control input-sm " id="x2" placeholder="请输入姓名">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-3 control-label">性别</label>
                    <div class="col-sm-9">
                        <select class="form-control input-sm " id="x3">
                            <option>男</option>
                            <option>女</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-3 control-label">联系电话</label>
                    <div class="col-sm-9">
                        <input type="number" class="form-control input-sm " id="x4" placeholder="请输入电话">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-3 control-label">职位</label>
                    <div class="col-sm-9">
                        <select class="form-control input-sm " id="x5">
                            <option>主任</option>
                            <option>老师</option>
                            <option>保洁员</option>
                            <option>安保</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-3 control-label">工作天数</label>
                    <div class="col-sm-9">
                        <input type="number" class="form-control input-sm " id="x6" placeholder="请输入工作天数">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-3 control-label">迟到</label>
                    <div class="col-sm-9">
                        <input type="number" class="form-control input-sm " id="x7" placeholder="请输入">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-3 control-label">请假</label>
                    <div class="col-sm-9">
                        <input type="number" class="form-control input-sm " id="x8" placeholder="请输入">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-3 control-label">旷工</label>
                    <div class="col-sm-9">
                        <input type="number" class="form-control input-sm " id="x9" placeholder="请输入">
                    </div>
                </div>
            </form>
        </div>
        <div class="Ma-3">
            <button class="okkk">确定</button>
            <button class="no">取消</button>
        </div>
    </div>
</body>
<script src="../js/zxp-EmAttendance.js">
</script>
<script src="../js/zxp-EmAttend.js"></script>
<!--<script>
$(function () {
    //全选

    $('.Btn-All').click(function () {
        let aCheckbox=$('.ccc');
        for(var i=0;i<aCheckbox.length;i++){
            aCheckbox[i].checked=true;
        }
    //删除
    });
    $('.Btn-AllDel').click(function () {
        let aCheckbox=$('.ccc');
        for(var i=0;i<aCheckbox.length;i++){
            if (aCheckbox[i].checked){
                $('.ccc').parents('tr').remove()
            }
        }


    });
    //全不选
    $('.Btn-No').click(function () {
        let aCheckbox=$('.ccc');
        for(var i=0;i<aCheckbox.length;i++){
            aCheckbox[i].checked=false;
        }
    });
    //考勤异常
    $('.abnormal').click(function () {
        $('#Mask').show();
        $('#Mask1').show();
        $('#Mask').append($('#Mask1'));

    });
    //关掉弹框
    $('.cancel').click(function () {
        $('#Mask').hide();
        $('#Mask1').hide();
        $('#Mask2').hide();
        $('#Mask3').hide();
        $('#Mask4').hide();
    });

    //详情
    $('.details').click(function () {
        $('#Mask').show();
        $('#Mask3').show();
    });


});


//表单
    //setInterval(show,1000);
    var a=`<input type="checkbox" name="checkbox" title="发呆" lay-skin="primary" class="ccc">`;
    var s=`  <button class="btn btn-default btn-xs details" data-aaa="A" type="button"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span>详情</button>
  <button class="btn btn-default btn-xs edit" data-aaa="A" type="button"> <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>编辑</button>
  <button class="btn btn-default btn-xs remove" data-aaa="A" type="button"> <span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span>删除</button> `;
    var n=0;
    var data=[{
        Radio:a,
        Num:n,
        JOb:2111,
        Name:'ccc',
        Gender:'女',
        Post:'老大',
        Time:23,
        Late:12,
        Leave:2,
        Absen:1,
        Fun:s
    }, {
        Radio:a,
        Num:1,
        JOb:'0001',
        Name:'xxx',
        Gender:'女',
        Post:'老大',
        Time:23,
        Late:12,
        Leave:2,
        Absen:1,
        Fun:s
    },{
        Radio:a,
        Num:n,
        JOb:'0002',
        Name:'xxx',
        Gender:'女',
        Post:'老大',
        Time:23,
        Late:12,
        Leave:2,
        Absen:1,
        Fun:s
    },{
        Radio:a,
        Num:n,
        JOb:'0003',
        Name:'xxx',
        Gender:'女',
        Post:'老大',
        Time:23,
        Late:12,
        Leave:2,
        Absen:1,
        Fun:s
    },{
        Radio:a,
        Num:n,
        JOb:'0004',
        Name:'是对的',
        Gender:'女',
        Post:'扫地',
        Time:23,
        Late:12,
        Leave:10,
        Absen:1,
        Fun:s
    }
    ];
    var oT=document.querySelector('tbody');
    function show() {
        for(i=0;i<data.length;i++){
            n++;
            var oTr=document.createElement('tr');
            oTr.innerHTML=` <th class="th-last">${data[i].Radio}</th>
            <td>${n}</td>
            <td>${data[i].JOb}</td>
            <td>${data[i].Name}</td>
            <td>${data[i].Gender}</td>
            <td>${data[i].Post}</td>
            <td>${data[i].Time}</td>
            <td>${data[i].Late}</td>
            <td>${data[i].Leave}</td>
            <td>${data[i].Absen}</td>
            <td>${data[i].Fun}</td>`;
            oT.appendChild(oTr);
        }
    }
    show();

//添加联系人
var arr=[];
$('.two-1').click(function () {
    $('#Mask').show();
    $('#Mask2').show();
    $('#Mask').append($('#Mask2'));

});
//添加
$('.ok').click(function () {
    let oB2=$('.b2').val();
    let oB3=$('.b3').val();
    let oB1=$('.b1').val();
    let oB4=$('.b4').val();
    let oB5=$('.b5').val();
    let oB6=$('.b6').val();
    let oB7=$('.b7').val();
    let oB8=$('.b8').val();
    /*console.log(oB2)*/
    data=[];

    var c={
        Radio:'&nbsp;&nbsp;'+a,
        Num:n,
        JOb:oB1,
        Name:oB2,
        Gender:oB3,
        Post:oB6,
        Time:0,
        Late:0,
        Leave:0,
        Absen:1,
        Fun:s
    };
    //var ss=JSON.stringify(s);

    data.push(c);
    $('#Mask').hide();
    $('input').val('');
    show();
});
$('.no').click(function () {
    $('#Mask').hide();
    $('input').val('')
});

//删除
    var oBtn=$('.remove');
    var oTr=$('tr');
    var oTable=$('.tab');

    oTable.on('click','.remove',function () {
        $(this).parents('tr').remove();
    });

//编辑
$('.edit').click(function () {
    $('#Mask').show();
    $('#Mask4').show();
    //确认

    $('.okkk').click(function (e) {
        let oX1=$('#x1').val();
        let oX2=$('#x2').val();
        let oX3=$('#x3').val();
        let oX4=$('#x4').val();
        let oX5=$('#x5').val();
        let oX6=$('#x6').val();
        let oX7=$('#x7').val();
        let oX8=$('#x8').val();
        let oX9=$('#x9').val();

        data.push(JOb=oX1);
        data.Name=oX2;
        data.Gender=oX3;
        data.Post=oX5;
        data.Time=oX6;
        data.Late=oX7;
        data.Leave=oX8;
        data.Absen=oX9;

        $('#Mask').hide();
        $('#Mask4').hide();
    });
    //取消
    $('.no').click(function () {
        $('#Mask4').hide();
    });
});

//页面搜索
$(".soso").click(function(){
    var oS = $(".so").val();
    console.log(oS);
    if(oS.length==0){
        alert("请输入内容")
    }else if($("table tr td:contains('"+oS+"')").length==0){
        alert("找不到数据")
    }else{
        $(".table tr:not(:first)").hide();
        $(".table tr:contains('"+oS+"')").show().find("input").prop("checked",true)
    }

})
</script>-->
</html>